<template>
  <el-form ref="form" :model="form" label-width="80px" size="small">
    <el-tabs v-model="activeName">
      <el-tab-pane label="WGS-84" name="first">
        <el-form-item label="经度">
          <el-input v-model="form.lng" @change="handleResolveWgs(form.lng)" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="form.lat" @change="WGS84ToCartesian3" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input v-model="form.height" @change="WGS84ToCartesian3" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="笛卡尔" name="second">
        <el-form-item label="X">
          <el-input v-model="form.x" @change="handleResolveCar(form.x)" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="Y">
          <el-input v-model="form.y" @change="cartesian3ToWGS84" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="Z">
          <el-input v-model="form.z" @change="cartesian3ToWGS84" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="手动绘制" name="third">
        <el-form-item label="绘制">
          <el-button @click="handleDraw" icon="el-icon-location-outline" type="default" size="mini">开始绘制</el-button>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import * as Ces from 'cesium'
import { WGS84_to_Cartesian3, Cartesian3_to_WGS84 } from '@/components/dogeo/cesium/transform.js'
const Cesium = Ces

export default {
  name: 'view-coordinate',

  props: {
    viewer: {
      type: Object,
      default () {
        return null
      }
    },
    value: {
      type: Object,
      default () {
        return {
          lng: 116.3905,
          lat: 39.9084,
          height: 100000,
          x: -2211741.6430,
          y: 4457380.1988,
          z: 4134345.3574
        }
      }
    }
  },

  model: {
    prop: 'value'
  },

  data () {
    return {
      activeName: 'first',
      form: {
        lng: 116.3905,
        lat: 39.9084,
        height: 100000,
        x: -2211741.6430,
        y: 4457380.1988,
        z: 4134345.3574
      }
    }
  },

  created () {
    this.form = Object.assign({}, this.value)
  },

  methods: {
    // 开始绘制
    handleDraw () {
      if (!this.measureWidget) {
        this.measureWidget = new Cesium.MeasureCoordinateWidget({
          viewer: this.viewer,
          color: Cesium.Color.GOLD
        }, (evt) => {
          this.form.lng = evt.longitude
          this.form.lat = evt.latitude
          this.form.height = evt.height
          this.WGS84ToCartesian3()
          this.measureWidget.clear()
        })
      }
      this.measureWidget.activate()
    },
    handleResolveWgs (value) {
      if (/,/.test(value)) {
        let values = value.split(',')
        if (values[0]) {
          this.form.lng = values[0]
        }
        if (values[1]) {
          this.form.lat = values[1]
        }
        if (values[2]) {
          this.form.height = values[2]
        }
      }
      this.WGS84ToCartesian3()
    },
    handleResolveCar (value) {
      if (/,/.test(value)) {
        let values = value.split(',')
        if (values[0]) {
          this.form.x = values[0]
        }
        if (values[1]) {
          this.form.y = values[1]
        }
        if (values[2]) {
          this.form.z = values[2]
        }
      }
      this.cartesian3ToWGS84()
    },
    WGS84ToCartesian3 () {
      let point = WGS84_to_Cartesian3({
        lng: this.form.lng,
        lat: this.form.lat,
        alt: this.form.height
      })
      this.form.x = point.x
      this.form.y = point.y
      this.form.z = point.z
      this.$emit('input', this.form)
    },
    cartesian3ToWGS84 () {
      let x = Cartesian3_to_WGS84(this.form)
      this.form.lng = x.lng
      this.form.lat = x.lat
      this.form.height = x.alt
      this.$emit('input', this.form)
    }
  }
}
</script>